<template>
  <div class="gContainer">
    <!-- <d3graph /> -->
    <gSearch @getData="update" />
    <d3graph
      :data="data"
      :names="names"
      :labels="labels"
      :linkTypes="linkTypes"
    />
  </div>
</template>

<script>
import gSearch from '@/components/gSearch.vue'
import d3graph from '@/components/d3graph.vue'

export default {
  components: {
    gSearch,
    d3graph
  },
  data () {
    return {
      // d3jsonParser()处理 json 后返回的结果
      data: {
        nodes: [],
        links: []
      },
      // 这是图例
      // names: ['企业', '贸易类型', '地区', '国家'],
      // labels: ['Enterprise', 'Type', 'Region', 'Country'],
      names: ['人物', '事件', '精神谱系', '会议', '地区', '时间节点'],
      labels: ['people', 'event', 'spirit', 'conference', 'place', 'time'],

      linkTypes: ['相关事件', '相关会议', '包含', '参与', '师生', '发源地', '领导', '母子', '发生地', '夫妻', '好友', '召开地', '相关', '父女', '父子']
    }
  },
  methods: {
    // 视图更新
    update (json) {
      console.log('update')
      // console.log(json)
      this.d3jsonParser(json)
    },
    /*eslint-disable*/
    // 解析json数据，主要负责数据的去重、标准化
    d3jsonParser (json) {
      const nodes = []
      const links = [] // 存放节点和关系
      const nodeSet = [] // 存放去重后nodes的id      
      // console.log("d3jsonParser", json)

      for (let item of json) {
        // console.log("let item of json", item)
        let startid = item.start.startIdentity.low
        let endid = item.end.endIdentity.low
        // 重新更改data格式
        if (nodeSet.indexOf(startid) == -1) {
          nodeSet.push(startid)
          nodes.push({
            id: startid,
            label: item.start.startLabel[0],
            properties: item.start.nodeData
          })
        }
        if (nodeSet.indexOf(endid) == -1) {
          nodeSet.push(endid)
          nodes.push({
            id: endid,
            label: item.end.endLabel[0],
            properties: item.end.endNodeData
          })
        }
        links.push({
          source: startid,
          target: endid,
          type: item.relationship.relationshipData.property,
          properties: {
            'name': item.relationship.relationshipData.property
          }
        })
      }

      console.log(nodes)
      console.log(links)
      // this.links = links
      // this.nodes = nodes
      this.data = { nodes, links }
      // return { nodes, links }
    }
  }
}
</script>

<style lang="scss" scoped>
.gContainer {
  position: relative;
  // height: auto;
  // width: 100vw;
  border: 2px #000 solid;
  background-color: #07274f;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
</style>
